<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>

    <div class="container2">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>
 
    <div class="container3">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <button class="next">下一个</button>
    </div>
    </body>
    <script>
        var activeindex = 0
        class Tab {
            constructor(btns,divs){
                this.btns = btns
                this.divs = divs
                this.btns.forEach((btn,key)=>{
                    btn.onclick = ()=>{
                        activeindex = key
                        this.changeTab( activeindex)
                    }
                })
            }

            changeTab(key){
                this.divs.forEach((div,k)=>{
                    if(key === k){
                        div.style.display = 'block'
                    }else{
                        div.style.display = 'none'
                    }
                })
            }
        }

        var btns1 = document.querySelectorAll('.container button')
        var divs1 = document.querySelectorAll('.container div')
        new Tab(btns1,divs1)

        var btns2 = document.querySelectorAll('.container2 button')
        var divs2 = document.querySelectorAll('.container2 div')
        let tab2 = new Tab(btns2,divs2)
        let key2 = 0
        setInterval(()=>{
            key2++
            if(key2>2){
                key2 = 0
            }
            tab2.changeTab(key2)
        },1000)

        var btns3 = document.querySelectorAll('.container3 button')
        var divs3 = document.querySelectorAll('.container3 div')
        let tba3  = new Tab(btns3,divs3)

        document.querySelector('.next').onclick = ()=>{
            activeindex ++
            if(activeindex>2){
                activeindex = 0
            }
            tba3.changeTab(activeindex)
        }
</script>
</html>